Scribd
Upload
15 views

Welcome-to-React

Uploaded by

patchalajohn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Welcome-to-React

Uploaded by

patchalajohn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Welcome to React

React is a JavaScript library for building user interfaces. It allows


developers to create reusable components that manage their own state.
Setting Up Your Environment
Terminal Commands Creating a React App

Use the terminal to navigate and manage your Use create-react-app to create a new React
project files. project, including all the necessary files and
configuration.
1. pwd: Print working directory.
2. ls: List directory contents.
npm install -g create-react-app
3. mkdir: Make directories.
4. cd: Change directory. Then, run create-react-app my-app to create a
5. cd ..: Move up one directory level. new app named "my-app".
Babel and JSX

1 Babel: The Compiler 2 JSX: HTML-like 3 Example


Code
Babel is a JavaScript In JSX, we can write:
compiler that transforms JSX allows us to write
JSX syntax into regular HTML-like code within <div>Hello, world!
JavaScript that browsers JavaScript, making it </div>
can understand. easier to create user
interfaces.
This is then compiled
into:

React.createEleme
nt('div', null, 'Hello,
world!')
Understanding the Folder Structure

public/ src/ node_modules/


Contains the HTML file Contains the JavaScript Contains third-party
(index.html) and any assets code, including components libraries installed via npm.
like images and CSS. and logic.

package.json App.js
Configuration file for the project, including Entry point for the application. The code here
dependencies and scripts. is the first code that will be executed when
you run the app.
Components and JSX

1 2 3

Defining a Component Returning JSX Example


Components are the building Components must return a This component returns a
blocks of React applications. single JSX element or simple paragraph element:
fragment.
function
MyComponent() {
return <p>Hello from
MyComponent</p>;
}
Conditional Rendering
Example
This component displays a different message
based on a user's login status:

function Greeting(props) {
if (props.isLoggedIn) {
return <p>Welcome, {props.name}
</p>;
} else {
If-Else Statements return <p>Please log in</p>;
}
Use if-else statements to conditionally render
}
different content.

1 2 3

Ternary Operators
A shorthand for if-else statements, ideal for
concise conditional rendering.
Reserved Keywords and Rules of
Components
Keyword Explanation Example

class Has special meaning in


<div className="my-
JavaScript, so use className
class"></div>
instead.

for Use htmlFor instead of for.


<label htmlFor="my-
input"></label>
Putting it all Together

Breaking Down Reusability Maintainability


Complexity
Components can be reused Components make it easier to
Components allow us to divide throughout the application, update and maintain code, as
our user interface into smaller, making development more changes are localized.
manageable pieces. efficient.

You might also like