Skip to content

Instantly share code, notes, and snippets.

@zxiest

zxiest/jsconf-beirut-2016-plan.md

Last active March 12, 2016 12:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zxiest/e533a1090de5300b1483 to your computer and use it in GitHub Desktop.
Save zxiest/e533a1090de5300b1483 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsconf-beirut-2016-plan.md

React Basics

JSConf Beirut; March 12, 2016; Abdo Achkar @achkar

  1. How does this workshop work? (5 mins)
  2. What is React? (2 mins)
  3. Resources and Documentation Overview (2 mins)
  4. Why JSX?
  5. Starter kit, first React component (2 mins)
  6. Mini-project #1: React Bootstrap ( 30 minutes)
  7. Stateless components and JSX
  8. Passing props. Example: IconButton
  9. Rendering Arrays: Example: SimpleList
  10. Nesting Components: this.props.children
  11. Stateful Components
  12. getDefaultState() and render()
  13. setState()
Raw
jsconf-beirut-2016.md

Resources

This file

http://bit.do/jsconf-beirut-2016

React's Homepage

https://facebook.github.io/react/

React Starter Kit

https://facebook.github.io/react/downloads/react-0.14.7.zip

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8" />

    <!-- Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Roboto Font -->
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/babel">
    </script>
  </head>
  <body>
  </body>
</html>

Where to go

  1. https://github.com/enaqx/awesome-react
  2. http://survivejs.com/demos/08_building_kanban/
  3. https://www.udemy.com/react-redux/learn
  4. http://survivejs.com/
  5. http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/

Contact

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment