React.js for Beginners

A JavaScript library for building UI (user interfaces).

Features:

- One of it's unique feature is that not only does it perform on the client side, but it can also be rendered server side.

- A programming concept of virtual DOM makes it faster. virtual DOM is the clone of the actual DOM kept in memory and is used by react to sync with the actual DOM. This process is called reconciliation.

- Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. Read more.

- The most important concept to understand in React.js is the component.It can be either a function(stateless) component or a class(stateful) component.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.


Getting Started

1. Make sure you have a recent version of Node.js installed.
2. Follow the installation instructions to create a new project.
   
   Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
   
   

   // Install create-react-app CLI 

   npm install -g create-react-app

   // create an app 

   create-react-app my-app

   This is what you will get in your terminal after successful installation.

   Success! Created my-app at /home/ranjan/Desktop/my-app
   Inside that directory, you can run several commands:
   
     npm start
       Starts the development server.
   
     npm run build
       Bundles the app into static files for production.
   
     npm test
       Starts the test runner.
   
     npm run eject
       Removes this tool and copies build dependencies, configuration files
       and scripts into the app directory. If you do this, you can’t go back!
   
   We suggest that you begin by typing:
   
     cd my-app
     npm start
   

   
   
   Now if you run npm start in the project folder and open http://localhost:3000, you will see a welcome page pre built for you.
   
   

After creation, your project should look like this:

```
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
```
 
1) public/index.html is the page template
2) src/index.js is the JavaScript entry point 


You can delete or rename the other files.

You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.
You need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them.

Only files inside `public` can be used from `public/index.html`.
Read instructions below for using assets from JavaScript and HTML.

You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.


Happy Playing with your first ReactJs app :)