What is ReactJS?

• React is a JavaScript library for User Interface(UI)
• React is
  - Component based
  - Declarative
  - State driven

Component:

• Components are one of the core concepts of React
• Components are the building blocks for React
• Component is a normal JavaScript function which returns markup(HTML code)
• Component name normally starts with uppercase letter
• A component is a piece of UI that has its own data, logic and appearance

• React will take Component and draw on webpage
• A component can be as small as button or as big as complete page
• Building complex UI by building and combining multiple components
• Below is very simple react component for displaying text

//Simple react component
function SampleComponent(){
    return <h1>This is simple react component!!</h1>
}

Get chanduthedev’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Declarative:

• Declarative is simply telling react what a component should look like based on current data/state
  - Declarative syntax is used to create Components
  - This describes how component lokk like and how they work
  - Declarative syntax called JSX
  - JSX combines HTML, CSS, JavaScript and other custom components
  - Below is sample JSX component with JS and HTML code

// Sample JSX 
function Login() {
  // JS code
  if (isLogin()) {
    // HTML 
    <p>Welcome</p>;
  } else {
    // React component
    <LoginForm />;
  }
}

State-Driven:

• Main goal of React is always make UI in sync with data
• State variables are declared by calling the useState Hook.
• Data and State will be used interchangeably
• State is local to a component instance on the screen.
• if you render the same component twice, each copy will have completely isolated state! Changing one of them will not affect the other.
• Separate state for each component instance makes state different from regular variables that you might declare at the top of your module.
• State is not tied to a particular function call or a place in the code, but it’s “local” to the specific place on the screen.
• State is fully private to the component declaring it.
• Whenever data is changed/updated, react will re-render the components in the UI
• React only re-render when change the state, so its always update the state than directly updating the data.
• React Reacts to state changes by re-rendering the UI
• From the below pics, react renders basing on initial state in when page loads in step1 and steps 2 to 4 repeat when any state/data change

React component rendering when state updated/modified flow

Thanks to @jonasschmedtman for his clear and easy explanation on ReactJS course in Udemy course.