Styling in React Native: Understanding the App.js Structure + Direct and Dynamic Styles
Summary
TLDRThis 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
🛠️ 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.
🎨 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.
🔚 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.
Mindmap
Keywords
💡ReactJS
💡Application
💡StatusBar
💡Syntax
💡View
💡Text
💡Style
💡Flexbox
💡Button
💡EventListener
💡Global Style
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
浏览更多相关视频
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 6
Images and Styles | Mastering React: An In-Depth Zero to Hero Video Series
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
Introduction to Multisim | how to use multisim | Multisim Tutorials | Mruduraj
HTML Dasar : Paragraf (5/13)
Create Your First C# Windows Forms Application using Visual Studio
5.0 / 5 (0 votes)