React
Fundamentals and
Environment
Welcome to the world of React! This presentation will guide you
through the essential concepts and steps for setting up your
Setup
development environment. Let's dive in!
by 21505A0515 PATCHALA JOHN
Setting Up Your Development
Environment
Terminal Commands Installing Node.js Global Installation
The terminal is your Node.js is crucial for Install the Create
command center. running React React App tool globally
Learn essential applications. with "npm install -g
commands like "pwd" Download and install create-react-app". This
to view your current the latest version from command makes the
directory, "ls" to list the official Node.js tool accessible from
files and folders, website. This will also any directory on your
"mkdir" to create new install npm, the system.
directories, and "cd" to package manager for
navigate between Node.js.
directories.
Creating Your First React App
Create React App (CRA) Project Initialization
CRA is a powerful tool that sets up In your terminal, navigate to your
a pre-configured React project desired project location and run
structure, saving you time and "create-react-app my-react-app"
effort. to create a new project named
"my-react-app".
Starting the Development Server
After the project is created, navigate into the project directory and run "npm
start" to start the development server. This will open your application in a
web browser.
Understanding Babel and JSX
JSX
JSX (JavaScript XML) allows you to write HTML-like code within
JavaScript files, making React components more readable and
intuitive.
Babel
Babel is a JavaScript compiler that translates JSX syntax into plain
JavaScript that can be understood by web browsers.
JSX Transformation
Babel processes your JSX code, converting it into equivalent
JavaScript code, allowing browsers to execute your React
components.
Exploring the React App Folder
Structure
1 Public Folder 2 Src Folder
Contains the HTML file Holds your JavaScript code,
(index.html) that serves as the including React components,
entry point for your application, application logic, and styling
along with other static assets rules.
like images and CSS files.
3 Node Modules Folder 4 Package.json
A directory where npm installs A configuration file that stores
all project dependencies, project settings, dependencies,
including React itself and other scripts, and other important
libraries you use. information.
Creating and Using Components
**Component Creation** **Importing Components**
Components are JavaScript Use the "import" statement to
functions or classes that return JSX bring components into your files.
elements.
Name components using Specify the path and name of the
PascalCase (e.g., MyComponent). component to import.
Export components using "export Example: import MyComponent
default" or "export". from './MyComponent';
Returning Multiple Elements and
Conditional Rendering
JSX Fragments Conditional Rendering Dynamic Content
Use JSX fragments Display different Use variables to store
(<>...) to return content based on data and render
multiple elements from conditions using dynamic content within
a component. This JavaScript "if" your components. This
avoids creating statements or the allows you to change
unnecessary wrapper ternary operator within the displayed content
elements. JSX. based on user input or
data changes.
Reserved Keywords in JSX
1 2 3
Class Attribute Other Reserved Code Clarity
Keywords
The "class" attribute Using appropriate
in HTML is reserved Be aware of other syntax and avoiding
in JavaScript. Use reserved keywords reserved keywords
"className" instead like "for", "if", and ensures your code is
in JSX to avoid "while" and use clear and error-free.
conflicts. alternative syntax in
JSX when necessary.
