• React Component
• Stateless Component
• Props and State
• 2-way function binding
• Component life cycle
• Refs
• Router
  • Router Brief
  • Router More details
• Steps to create a React page
• UI Development with StoryBook

https://github.com/Tuong-Nguyen/JavaScript-Structure/tree/master/ReactReduxStarter

• Chrome React Devtool
• Firefox React Devtool
• Chrome Redux Devtool
• Firefox Redux Devtool

• Install sass-loader

npm install sass-loader node -sass --save-dev

• A library for user interfaces
• Component displays changed data over time
• Components are reusable
• React Native for mobile
• React Documents

React renders DOM faster using DOM diffing. DOM diffing:

• Compares rendered content with the new UI changes
• Makes only the minimal changes necessary
• Compare javascript objects
• Writing and reading DOM faster

Note: React scripts must be included after the container

• Create an element

React.createElement(
    <name of element>,
    {<element attributes>},
    <content of element>
);

EX:

const title = React.createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World!');

• Render element to DOM

 ReactDOM.render(<name of element to render>, <where to render>);

EX:

 ReactDOM.render(
     <h1 id='title' className='header'>
         Hello World!
     </h1>,
     document.getElementById('react-container')
 );

Note: Above example JSX, JSX = javascript + xml