Styling in React Native: Understanding the App.js Structure + Direct and Dynamic Styles

Summary

This video tutorial guides viewers through enhancing a ReactJS application. It begins with the removal of the status bar and delves into the app's main code, focusing on the use of 'View' and 'Text' components. The instructor demonstrates how to apply styles, such as centering text and adding margins, borders, and padding. The tutorial also introduces the concept of global styles for consistent application of design elements across the app. The lesson concludes with the addition of a button and a teaser for future lessons on event listeners, leaving viewers eager for more.

Takeaways

• 😀 The video is a tutorial on creating an application using ReactJS and displaying it on a physical device with Vur.
• 🛠️ The presenter starts by removing the status bar from the app to continue the lesson.
• 📝 React Native is strict about syntax, and the script emphasizes the correct import and usage of components like Text and View.
• 🎨 The tutorial explains how to apply styles in React Native, similar to using CSS in web development, with the help of a Styles object.
• 📱 The main code exports a default function named 'App' that returns a View component representing the screen.
• 🔄 The script demonstrates how to center text on the screen using flexbox properties within the Styles object.
• 🔲 The presenter adds a button to the application and explains that it currently doesn't have an event listener, which will be covered later.
• 🖌️ The tutorial shows how to apply inline styles to the Text component, including margin, border width, border color, and padding.
• 🔄 The difference between margin and padding is clarified, with margin being external and padding being internal to the element.
• 🔄 The script guides on creating a global text style to avoid duplicating style code for multiple text elements.
• 🔄 The presenter instructs viewers to apply the global text style to other text elements in the application for consistency.

Q & A

What is the main topic of the video script?

The main topic of the video script is creating and exploring an application using ReactJS, specifically focusing on the app.js file and styling elements within it.

Why is the status bar being removed in the script?

The status bar is being removed as part of the lesson to continue exploring the app.js file without unnecessary UI elements, allowing for a cleaner focus on the application's content.

What is the significance of React Native's strict syntax in the script?

React Native's strict syntax is important because it ensures that the code is properly recognized and executed by the framework, which is highlighted in the script when importing components.

What does the script mean by 'self-closing' in the context of the button element?

In the script, 'self-closing' refers to a type of HTML element that does not require a separate closing tag, like the button element in React Native, which automatically closes after the title is set.

What is the purpose of the 'Styles' constant in the script?

The 'Styles' constant is used to define and apply a set of styles to the elements within the React Native application, allowing for a consistent and organized approach to styling.

How does the script differentiate between 'margin' and 'padding' in styling?

The script explains that 'margin' is the space outside of an element, while 'padding' is the space inside an element, affecting the layout and appearance differently.

What is the purpose of creating a 'textStyle' in the script?

Creating a 'textStyle' allows for the reuse of the same styling across multiple text elements within the application, promoting consistency and reducing code redundancy.

Why might someone want to apply the same style to multiple text elements?

Applying the same style to multiple text elements helps maintain a uniform look and feel across the application, making it more visually cohesive and easier to manage.

What does the script suggest for adding new elements to the application?

The script suggests adding new elements, such as a button, by inserting the element within the 'View' component and styling it as needed, with the option to add event listeners later.

What is the next step mentioned in the script after understanding the 'View' and styling?

The next step mentioned in the script is to tackle the creation of an event listener for the button, which will add interactivity to the application.

Outlines

00:00

🛠️ React Native Application Setup and Styling Basics

This paragraph introduces the process of setting up a React Native application and removing unnecessary elements like the status bar. It emphasizes the importance of syntax in React Native and demonstrates how to import and apply styles to UI components such as text and views. The main code is explained, showing how a default function named 'app' is exported, which returns a view containing a centered 'congratulations' message. The paragraph also explains how to apply styles to elements, mentioning the use of Flexbox for layout and the difference between margin and padding in styling.

05:00

🎨 Customizing UI Components with Styles in React Native

The second paragraph delves into customizing the UI components by directly applying styles to the 'congratulations' text. It discusses adding margin, border, and padding to the text component and explains the distinction between margin (external spacing) and padding (internal spacing). The paragraph also introduces the concept of creating a global style called 'textStyle' to avoid duplicating style code across multiple text components. It guides through the process of applying this global style to different text elements within the application.

10:01

🔚 Conclusion and Preview of Upcoming Tutorial Content

The final paragraph wraps up the tutorial by summarizing the steps taken so far and encouraging viewers to apply the learned concepts. It hints at the next part of the tutorial, which will cover event listeners, a crucial aspect of interactive UI development. The paragraph ends with an invitation for viewers to join the next video, where more advanced topics will be explored.

Keywords

💡ReactJS

ReactJS is a popular JavaScript library for building user interfaces, particularly single-page applications. It is maintained by Facebook and a community of individual developers and companies. In the video, ReactJS is used to create an application, emphasizing its role in modern web development for crafting interactive and dynamic content.

💡Application

In the context of this video, an 'application' refers to a software program that is being developed using ReactJS. The script discusses the process of creating and displaying this application, highlighting the iterative nature of software development where features and aesthetics are refined over time.

💡StatusBar

The 'StatusBar' is a UI component in React Native that represents the status bar found at the top of mobile screens. In the script, the removal of the StatusBar is mentioned as part of the tutorial, indicating a step in customizing the application's appearance.

💡Syntax

Syntax refers to the set of rules that dictate how elements in a programming language are combined to form statements. The video script mentions that React Native is strict with syntax, emphasizing the importance of adhering to these rules to ensure the application functions correctly.

💡View

In React Native, 'View' is a fundamental UI component used to create layout structures similar to 'div' elements in HTML. The script describes using View to encompass the entire screen of a mobile device, demonstrating its role in structuring the application's interface.

💡Text

The 'Text' component in React Native is used to display blocks of text. In the video, 'Text' is utilized to show a congratulatory message, illustrating how developers can integrate textual content into their applications.

💡Style

Styles in React Native are used to define the appearance of components. The script discusses applying styles such as margin, border, and padding to both the View and Text components, showing how developers can customize the look and feel of their applications.

💡Flexbox

Flexbox is a CSS layout model that allows for the flexible arrangement of items within a container. The video script mentions Flexbox in the context of aligning content within the View, demonstrating its use for creating responsive and adaptable layouts.

💡Button

A 'Button' is a UI element that users can interact with to perform actions. The script introduces adding a button to the application with a title 'Click Me', indicating how developers can include interactive elements to engage users.

💡EventListener

An 'EventListener' is a function that runs in response to a specific event, such as a button click. The video script mentions that adding an event listener to the button will be covered later, suggesting the importance of event handling in creating interactive applications.

💡Global Style

A 'Global Style' refers to a set of CSS rules that apply across an entire application. The script discusses creating a global text style to avoid redundancy, showing how developers can maintain consistency in styling across different components.

Highlights

Introduction to creating an application using ReactJS.

Displaying the application on a physical device and mirroring with the VRU.

Exploring the app.js file for the application.

Removing the import statement for the status bar.

React Native's strict syntax requirements.

Importing styles and using them in the application.

Explanation of the main code structure in app.js.

Using the View component to take up the whole screen.

Styling the congratulation message to be centered on the screen.

Creating a style object for the View component.

Adding a button to the application.

Explanation of how to add a self-closing button with a title.

Automatic rendering of the button in the application.

Understanding the View component and its role in the application.

Applying direct styles to the congratulation message text.

Difference between margin and padding in styling.

Creating a global text style for reuse in the application.

Applying the global text style to multiple text elements.

Conclusion of the tutorial and a teaser for the next video.

Transcripts

previously

we introduced on how to create an

application using

reactjs and we already uh display our

application using our physical

device and mirror it using the

vur So today we're going to

explore our

app.js application

so here first you need to remove a

necessary file for us to continue our

lesson so in this I will remove first

the status bar the import status bar and

this status bar

here a reminder

here react native is very strict when it

comes to the syntax so as you can see we

are using using a syntax

that the react native

is

recognized so as you can see here we

import the style here's our style the

text so we use text we also have view

for this

view this command import we are

importing outside from our code so we

are using a a already

created sets of program from a react

native so here's our main code as you

can see here we export the default

function and we call is app and this app

return this

view so in our application as you can

see here inside this application we have

a view this pertaining to this view the

whole screen of our cell phone and

inside this we have this text of

congratulations now if you wonder why

this congratulation message is in the

center as you can see here under this

view we apply some style like in the web

we have a cas aing Styles sheet to have

a design but here in react native we use

this in like manner so that we can apply

or configure our

elements so these our tags inside we

have one View and inside this we have

text this view has this style as you can

see here we put put the

container so in order for us to create a

style inside this we declare a constant

Styles we call this Styles and we call

the or the imported um stylesheet in

this import so as you can see here and

then

we uh put the

create it's an object we create

we are creating a style for our

elements so here I declare the container

by default we have this container so

inside this container using colum and

curly braces as you can see here we have

this code so Flex like in the website we

have a flex box we

can

divide using Flex

our screen view we have also the

background color we have also alignments

and justify content so let's try to have

or to add

another um elements here so in this we

need to put a button so let's put a

button and this button button is a self

closing has a self-closing TX so inside

this button we will put the title as the

name of the

button let's put click

me

or press

me let's save

this

and you will see here Auto automatically

the button will inputed here and if you

want to look

our code or our display you will see a

congratulation message here this is the

text and the button so we can click this

and of course this button has no event

listener so later we will tackle on how

to create an EV event listener for now

let's understand first The View let's

now try to apply or add directly some

Style on our text in this congratulation

message so inside this text inside this

opening tags of our text we can simply

put here a

style automatically we we can put a

style and we can put

a

uh curly Braes to add our style we can

put

margin we can also put a

border border

WID let's put

two and let's also put a

border

color and let's

put

red and also last one is

padding so the difference between the

margin and padding margin is it's from

the outside padding is inside so now

let's try to see our

code as you can see here we input um

style in our text in this text and we

put margin 16 as you can see the button

and this text has a margin outside and

inside we have this padding 16 also

to our um congratulation

message and then we have also the Border

WID that's the color of our uh the color

of our border is color red now what if

you want to apply the

same the same um style to the other text

so if you if in case you have here

another text let's put another text

here hello and

save you will see here this is the Hello

message so what if you want to apply the

same style here so in order for us to

apply the same style

without um copying all this you can

directly copy this one no to this text

but in our case we will have a global or

create a global style in order for us to

apply

this

globally in our

code so first you need to have a Styles

so

in this constant style we created or by

default created so let's now declare a

style

here let's call this text

style and inside this we can

put all

this style we created a while ago so

let's copy this

one and then put

here this

one so now let's remove this curly

braces and then

apply this text style to our first text

congratulation if we save this

sorry

style Dot and as you can see we have

here our text sty let's use this one and

save as you can

see our uh design is still there because

we

apply using this command now we can

simply copy this one so that the next

text we have can have the

same

style save and then let's go and as you

can see you have the next stab so for

now we will stop this video tutorial and

I require you to to apply

this and see you for the next video